import React from 'react';
import { Menu, Button } from 'antd';
import { TrophyOutlined, BellOutlined, LineChartOutlined, EllipsisOutlined, MessageOutlined } from '@ant-design/icons'
import { dropDownMenuList } from '../../../config/menuConfig';
import styles from "./newsList.module.css"


const NewsList = () => {

    return (
        <div className={styles["dropDownList"]}>
            <Menu className={styles["menu"]}>
                {
                    dropDownMenuList.map(item => {
                        return (
                            <Menu.Item key={item.key} className={styles["menuItem"]} >
                                <Button className={styles["btn"]} >
                                    <div className={styles["logo"]}><TrophyOutlined style={{ fontSize: "20px" }} /></div>
                                    <div className={styles["desc"]}>
                                        <div className={styles["desc-ctx"]}>{item.title}</div>
                                        <div className={styles["desc-date"]}>三天前</div>
                                    </div>
                                </Button>
                            </Menu.Item>
                        )
                    })
                }
            </Menu>
            <div className={styles["summary"]}>
                <div className={styles["btnOne"]}><Button icon={<BellOutlined />}>24</Button></div>
                <div className={styles["btnTwo"]}><Button icon={<LineChartOutlined />}></Button></div>
                <div className={styles["btnRight"]}>
                    <div className={styles["btnThree"]}><Button icon={<MessageOutlined />}></Button></div>
                    <div className={styles["btnFour"]}><Button icon={<EllipsisOutlined />}></Button></div>
                </div>

            </div>
        </div>

    )
}
export default NewsList